<template>
  <div class="gouwucheliebiaomaincoll">
    <div>
      <div class="left">
        <input
          v-if="isxianshi"
          :id="'color-input-red'+itmes.id"
          class="color-input-red"
          type="checkbox"
          @click="duoxuan(itmes.isxuanzhong)"
          name="color-input-red"
          value="#f0544d"
          v-model="itmes.isxuanzhong"
        />
        <label v-if="isxianshi" :for="'color-input-red'+itmes.id"></label>
        <span>{{itmes.name}}</span>
      </div>
      <div class="right">
        <span>规格</span>
        <span>单价</span>
        <span>数量</span>
        <span>金额</span>
        <span v-if="isxianshi">操作</span>
      </div>
    </div>
    <div v-for="(itme,index) in itmes.nini" :key="index" class="gouwucheliebiaomaincollbottom">
      <div class="left">
        <input
          v-if="isxianshi"
          :id="'color-input-red'+itmes.id+itme.id"
          class="color-input-red"
          type="checkbox"
          name="color-input-red"
          value="#f0544d"
          v-model="itme.isxuanzhong"
          @click="danxuan"
        />
        <label v-if="isxianshi" :for="'color-input-red'+itmes.id+itme.id"></label>
        <img :src="require('../assets/img/'+itme.imgurl)" alt />
        <span>{{itme.goodname}}</span>
      </div>
      <div class="right">
        <span>{{itme.guige}}</span>
        <span>
          ￥
          <span class="danjia">{{itme.danjia}}</span>
        </span>
        <span class="shu">
          <a
            href="javascript:"
            @click="jianxiao(index)"
            class="btn btn_minus"
            role="button"
            title="减少"
          ></a>
          <div class="inputNum">
            <input v-model="itme.shiliang" size="1" />
          </div>
          <a
            href="javascript:"
            @click="itme.shiliang++"
            class="btn btn_plus"
            role="button"
            title="增加"
          ></a>
        </span>
        <span>
          ￥
          <span class="zongjia">{{itme.danjia*itme.shiliang}}</span>
        </span>
        <span v-if="isxianshi" class="shanchu" @click="itme.isxuanzhong=false">
          <span>
            <span @click="shanchu($event,itme.id)">删除</span>
          </span>
        </span>
      </div>
    </div>
    <div class="gouwucheliebiaomaincollzongjia">
      <span v-if="!isxianshi">运费</span>
      <span v-if="!isxianshi" class="huang">
        ￥
        <span>5.0</span>
      </span>
      <span>商品金额</span>
      <span class="huang">
        ￥
        <span>{{con(itmes)}}</span>
      </span>
      <span v-if="!isxianshi">商家合计</span>
      <span v-if="!isxianshi" class="huang">
        ￥
        <span>{{con(itmes)+5}}</span>
      </span>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: ["itme", "isxianshi"],
  data() {
    return {
      itmes: this.itme
    };
  },
  methods: {
    con(e) {
      var zongjia = 0;
      e.nini.map(function(item) {
        if (item.isxuanzhong) {
          zongjia += item.danjia * item.shiliang;
        }
      });
      return zongjia;
    },
    jianxiao(e) {
      if (this.itmes.nini[e].shiliang > 1) {
        this.itmes.nini[e].shiliang--;
      } else {
        alert("已经是最小了");
      }
    },
    shanchu(e, id) {
      // var _this = this;
      var url = this.$store.state.url;
      axios.post(url + "gouwucheshanchu", { id: id }).then(
        res => {
          // 成功回调
          if (res.data.code == "300") {
            alert("删除成功");
            e.target.parentElement.parentElement.parentElement.parentElement.remove();
          }
        },
        res => {
          window.console.log(res);
          // 错误回调
        }
      );
    },
    duoxuan(e) {
      this.itmes.nini.map(function(a) {
        a.isxuanzhong = !e;
      });
    },
    danxuan() {
      var _this = this;
      setTimeout(function() {
        // vue 双向绑定更改数据有延迟
        for (var i = 0; i < _this.itmes.nini.length; i++) {
          if (_this.itmes.nini[i].isxuanzhong) {
            _this.itmes.isxuanzhong = true;
          } else {
            _this.itmes.isxuanzhong = false;
            return;
          }
        }
      }, 20);
      /*       this.itmes.nini.map(function(a) {
        
        if (a.isxuanzhong) {
          window.console.log(11111111111)
          _this.itmes.isxuanzhong = true;
        } else {
          window.console.log(22222222)
          _this.itmes.isxuanzhong = false;
          // 挑不出循环，神奇
          return;
        }
      }); */
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.gouwucheliebiaomaincoll {
  margin-bottom: 1rem;
}
.gouwucheliebiaomaincoll > div {
  display: flex;
  padding: 1rem;
  align-items: center;
}
.gouwucheliebiaomaincoll div .left {
  width: 30%;
  display: flex;
  justify-content: start;
  align-items: center;
}
.gouwucheliebiaomaincoll div .left img {
  width: 16%;
  border: 1px solid #ccc;
}
.gouwucheliebiaomaincoll div .right {
  width: 70%;
  display: flex;
  justify-content: space-between;
}
.gouwucheliebiaomaincoll > div:first-of-type {
  background: #f2f2f2;
  border: 1px solid #ccc;
  border-bottom: none;
}
.gouwucheliebiaomaincoll div .right > span {
  width: 100%;
  text-align: center;
}
.gouwucheliebiaomaincollbottom {
  border: 1px solid #ccc;
  border-top: none;
}
.gouwucheliebiaomaincollbottom .shanchu {
  color: #6da564;
  cursor: pointer;
}
.gouwucheliebiaomaincollbottom .left span {
  margin-left: 1rem;
}
input[type="checkbox"] {
  display: none;
}

.color-input-red + label {
  display: block;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  cursor: pointer;
  border-radius: 2px;
  margin-right: 1em;
  border: 1px solid #ccc;
}
.color-input-red:checked + label {
  border: 1px solid #498e3d;
}
.color-input-red:checked + label::before {
  display: block;
  content: "\2714";
  text-align: center;
  font-size: 16px;
  color: white;
  color: #498e3d;
}

.shu {
  display: flex;
  justify-content: center;
}
.inputNum {
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
}
.inputNum input {
  vertical-align: middle;
  height: 1rem;
  border: none;
  text-align: center;
  outline: none;
}
.btn {
  display: inline-block;
  vertical-align: middle;
  background: #f0f0f0 no-repeat center;
  border: 1px solid #d0d0d0;
  width: 1.5rem;
  height: 1.5rem;
  box-shadow: 0 1px rgba(100, 100, 100, 0.1);
  color: #666;
  transition: color 0.2s, background-color 0.2s;
}

.btn:active {
  box-shadow: inset 0 1px rgba(100, 100, 100, 0.1);
}

.btn:hover {
  background-color: #e9e9e9;
  color: #333;
}

.btn_plus {
  background-image: linear-gradient(to top, currentColor, currentColor),
    linear-gradient(to top, currentColor, currentColor);
  background-size: 10px 2px, 2px 10px;
}

.btn_minus {
  background-image: linear-gradient(to top, currentColor, currentColor);
  background-size: 10px 2px;
}

.gouwucheliebiaomaincoll .gouwucheliebiaomaincollzongjia {
  display: flex;
  justify-content: flex-end;
  border: 1px solid #ccc;
  border-top: none;
}

.huang {
  color: #ff5757;
  font-size: 1.2rem;
  padding: 0px 1rem;
}
</style>
